<template>
    <div class="Service-box">
        <div class="box-left">
            <img :src="overviewData.imgUrl" alt="" />
        </div>
        <div class="box-right">
            <div class="top" v-for="item in overviewData.topData">
                <div class="name">{{ item.name }}</div>
                <div class="right">
                    <div class="num">{{ item.num }}</div>
                    <div class="util">{{ item.util }}</div>
                </div>
            </div>
            <div class="down">
                <div :style="{ width: item.width ? item.width : '50%' }" class="item" v-for="item in overviewData.downData">
                    <div class="name">{{ item.name }}</div>
                    <div :class="item.isError ? 'num error' : 'num'">
                        {{ item.num }}
                    </div>
                    <div class="util">{{ item.util }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from '@/utils'

const props = defineProps({
    overviewData: {
        type: Object,
        default: () => {
            return {
                imgUrl: getAssetsFile('home/Frame28981.png'),
                topData: [
                    {
                        name: '服务监管总量',
                        num: 432,
                        util: '个'
                    }
                ],
                downData: [
                    {
                        name: '完好率',
                        num: 97,
                        util: '%'
                    },
                    {
                        name: '损坏率',
                        num: 3,
                        util: '%',
                        isError: true
                    }
                ]
            }
        }
    }
})
</script>

<style scoped lang="scss">
.Service-box {
    width: 400px;
    height: 101px;
    padding: 20px 10px 0 10px;
    margin-bottom: 10px;
    background: url('@/assets/images/home/Group29171.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    .box-left {
        img {
            width: 119px;
            height: 119px;
        }
    }
    .box-right {
        flex: 1;
        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name {
                font-size: 18px;
            }
            .right {
                display: flex;
                align-items: center;
                .num {
                    font-size: 30px;
                    letter-spacing: 1px;
                    margin-right: 5px;
                    color: #009bf1;
                    font-family: PangMenZhengDao;
                }
                .util {
                    margin-top: 5px;
                    font-size: 14px;
                    color: #009bf1;
                }
            }
        }
        .down {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 10px;
            .item {
                min-width: 50%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-bottom: 5px;
                .name {
                    font-size: 14px;
                }
                .num {
                    font-size: 18px;
                    font-family: PangMenZhengDao;
                    color: #009bf1;
                }
                .util {
                    font-size: 14px;
                }
                .error {
                    color: #ff6c83;
                }
            }
        }
    }
}
</style>
